<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Level 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/d3.v6.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <style>
        .inline_block{
            display: inline-block;
        }
        .ibutton{
            width: 130px;
            height: 40px;
            margin: 10px;
        }
        .legend{
            width:100px;
            height:800px;
        }
        .heatmap{
            width:1000px;
            height:800px;
        }
    </style>
</head>
<body>
    <div>
        <button class='ibutton' onclick="showMax()">Max</button>
        <button class='ibutton' onclick="showMin()">Min</button>
    </div>
    <div id="heatmap" class='inline_block heatmap'></div>
    <div id='legend' class='inline_block legend'></div>
</body>
<script>
    //定义heatmap外边距、高度、宽度、格子高度
    var margin = { top: 100, right: 50, bottom: 80, left: 100 },
    width = 1000 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom,
    gridHeight = height / 12, // there are 12 months in a year
    gridMargin = { top: 3, right: 3, bottom: 3, left: 3 },
    
    
    legendSize = { height: 20, width: 150};
    var t;
    months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];

    
    $(function(){
    var svg = d3.select("#heatmap").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
    var g = svg.append("g")
    // 尺度
    var xScale = d3.scaleLinear();
    var yScale = d3.scalePoint();
    //颜色
    var color = d3.scaleSequential(d3.interpolateRdBu);        
    data_groupByMonth=null
    d3.csv('./data/temperature_daily.csv').then(function(data){
        
        //增广数据 便于后续数据处理
        var parseDate = d3.timeParse('%Y-%m-%d');
        var formatDate = d3.timeFormat('%Y-%m');
        data.forEach(function(e){
            var date = parseDate(e.date);
            e.year = date.getFullYear();
            e.month=months[date.getMonth()];
            e.ym=formatDate(date); 
        })

        t=d3.rollup(data, v => {
            //return d3.max(v,e=>{return parseInt(e.max_temperature)})
            return {"month": v[0].month, 
                     "year": v[0].year,
                     "max":d3.max(v,e=>{return parseInt(e.max_temperature)}),
                     "min":d3.min(v,e=>{return parseInt(e.max_temperature)})
                    };
        }, d => d.ym)
        dataArray=[]
        //console.log(t)
        t.forEach(e=>{dataArray.push(e)})
        //console.log(dataArray[1])
        data=dataArray;

        var XRange = d3.extent(data.map(e=>e.year));
        var gridWidth = width / (XRange[1] - XRange[0] + 1);
        //console.log(XRange);
        var minTemp = d3.min(data.map(e => e.min));
        var maxTemp = d3.max(data.map(e => e.max));

        xScale.domain(XRange).range([gridWidth/8, width - gridWidth/8]);
        yScale.domain(months).range([gridHeight/8, height - gridHeight/8]);
        var myColor = d3.scaleLinear().range(["#bcd2f7", "#b40426"]).domain([minTemp,maxTemp]);
        g.call(d3.axisTop(xScale).ticks(XRange[1] - XRange[0] + 1, d3.format("d")));

        g.call(d3.axisLeft(yScale));
        g.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d) { return xScale(d.year) })
        .attr("y", function(d) { return yScale(d.month) })
        .attr("width", gridWidth)
        .attr("height", gridHeight )
        .style("fill", function(d) {return myColor(d.max)} )
        

        

    })


    });
</script>
</html>